<template>
  <div id="vditor"></div>
</template>
<script>
import { onMounted, watch } from "vue";
import Vditor from "vditor";
import "vditor/dist/index.css";
export default {
  props: {
    md: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    let vditor = null;
    onMounted(() => {
      const height = document.body.offsetHeight - 260;
      vditor = new Vditor("vditor", {
        height,
        toolbarConfig: {
        //   pin: true,
        },
        outline: {
          enable: true,
        },
        cache: {
          enable: false,
        },
        preview: {
          hljs: {
            lineNumber: true,
            style: "native",
          },
        },
        after() {
          vditor.setValue(props.md);
          emit("md-editor", vditor);
        },
      });
    });

    watch(
      () => props.md,
      (md) => {
        vditor.setValue(md);
      }
    );
  },
};
</script>
